<template>
    <div class="liquorType">
        <div class="searchList_head">
            <span class="goBack" @click="goBack">&lt;</span>
            <div class="search_box">
                <img src="../../static/img/search.png" />
                <el-input placeholder="请输入内容" v-model="searchVal" clearable></el-input>
            </div>
            <span class="search_text">搜索</span>
        </div>
        <div class="tool_bar">
            <ul class="tool_bar_con">
                <li><span>综合</span></li>
                <li class="flex_grow">
                    <span @click="salesVolumeAsc()">销量</span>
                    <i class="sortbtn">
                        <b  :class="blueClassRiseFallAsc ? blueAsc : ''" @click="salesVolumeAsc()"></b>
                        <b  :class=" blueClassRiseFallDesc? blueDesc : ''" @click="salesVolumeDesc()"></b>
                    </i>
                </li>
                <li class="flex_grow">
                    <span  @click="sortPriceAsc()">价格</span>
                    <i class="sortbtn">
                        <b  :class=" blueClassPriceAsc? blueAsc : ''"  @click="sortPriceAsc()"></b>
                        <b  :class="blueClassPriceDesc ? blueDesc : ''"  @click="sortPriceDesc()"></b>
                    </i>
                </li>
                <li @click="screenSwitchOpen"><span>筛选</span></li>
            </ul>
        </div>
        <ul class="commodity_con">
           <li v-for="(item,index) in commodityList" :key="index">
               <p class="commodity_img"></p>
               <div class="commodity_text">
                   <span class="commodity_title">{{item.title}}</span>
                   <span class="commodity_price">&yen;{{item.price}}</span>
                   <span class="commodity_salesVolume">&yen;{{item.salesVolume}}</span>
               </div>
           </li>
       </ul>
       <transition name="screenSwitch">
       <div class="filter_box" v-show="screenSwitch" >
           <div class="filter_box_btm" @click="screenSwitchClose"></div>
           <transition name="screenSwitchCon">
                <div v-show="screenSwitchCon" class="filter_box_con">
                    <div class="filter_box_con_c">
                        <p class="filter_box_con_c_title">筛选:</p>
                        <div class="filter_box_type">

                            <el-checkbox-group v-model="checkboxGroup1">
                                <el-checkbox-button v-for="item in liquorType" :label="item" :key="item">{{item}}</el-checkbox-button>
                            </el-checkbox-group>


                            <!-- <li v-for="(item,index) in liquorType" :key="index" :class="{'activeClass' : index = selectItemId }" @click="selectScreenItem(index)">
                                    {{item.title}}
                            </li> -->
                        </div>
                    </div>
                    <div class="filter_box_con_b">
                        <span class="reset" @click="resetScreenItem">重置</span>
                        <span class=" finish" @click="finishScreenItem">完成</span>
                    </div>
                </div>
            </transition>    
       </div>
       </transition>
    </div>
</template>
<script>
export default {
    name:'liquorType',
    data(){
        return {
            ids:"",
            searchVal:'',
            //搜索过滤功能
            search:'',
            //排序样式控制
            blueClassRiseFallAsc:false,
            blueClassRiseFallDesc:false,
            blueClassPriceAsc:false,
            blueClassPriceDesc:false,
            blueAsc:'blueasc',
            blueDesc:'bluedesc',
            screenSwitch:false, /*筛选框开关*/
            screenSwitchCon:false, /*筛选框内容开关*/
            activeBind:false, /*筛选框内容选中开关*/
            checkboxGroup1:['全部'],
            commodityList:[
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'500',
                    salesVolume:61,

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2500',
                    salesVolume:11,

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'200',
                    salesVolume:21,

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'3500',
                    salesVolume:13,

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2800',
                    salesVolume:31,

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2100',
                    salesVolume:80,

                },
            ],
            liquorType:['全部','茅台','五粮液', '泸州老窖','洋河','牛栏山','汾酒','剑南春','郎酒'],
        }
    },
    created(){
       this.ids=this.$route.params.id
    },
    methods:{
        goBack(){
            this.$router.go(-1)
        },
        /*排序函数*/
        sortFn(commodityList,newestPrice,num){
            const _self=this;
            this.num=num;
            return commodityList.sort(function(a,b){
                if(_self.num===1){
                    let x =  parseFloat(a[newestPrice]);
                    let y = parseFloat(b[newestPrice]);
                    return ((x<y)?-1:(x>y)?1:0);
                }else if(_self.num===-1){
                    let x =  parseFloat(b[newestPrice]);
                    let y = parseFloat(a[newestPrice]);
                    return ((x<y)?-1:(x>y)?1:0);
                }
            })
        },
        /*价格升序*/
        sortPriceAsc(){
            this.blueClassPriceAsc=true;
            this.blueClassPriceDesc=false;
            this.blueClassRiseFallAsc=false;
            this.blueClassRiseFallDesc=false;
            const _self=this;
            return this.sortFn(_self.commodityList,'price',1);
        },
        /*价格降序*/
        sortPriceDesc(){
            this.blueClassPriceAsc=false;
            this.blueClassPriceDesc=true;
            this.blueClassRiseFallAsc=false;
            this.blueClassRiseFallDesc=false;
            const _self=this;
            return this.sortFn(_self.commodityList,'price',-1);
        },
        /*销量升序*/
        salesVolumeAsc(){
            this.blueClassPriceAsc=false;
            this.blueClassPriceDesc=false;
            this.blueClassRiseFallAsc=true;
            this.blueClassRiseFallDesc=false;
            const _self=this;
            return this.sortFn(_self.commodityList,'salesVolume',1);
        },
        /*销量降序*/
        salesVolumeDesc(){
            this.blueClassPriceAsc=false;
            this.blueClassPriceDesc=false;
            this.blueClassRiseFallAsc=false;
            this.blueClassRiseFallDesc=true;
            const _self=this;
            return this.sortFn(_self.commodityList,'salesVolume',-1);
        },
        /*筛选框打开*/
        screenSwitchOpen(){
            this.screenSwitch=true;
            this.screenSwitchCon=true;
        },
        /*筛选框关闭*/
        screenSwitchClose(){
            this.screenSwitch=false;
            this.screenSwitchCon=false;
        },
        /*重置筛选框内容*/
        resetScreenItem(){
            this.checkboxGroup1=[];
        },
        /*完成筛选选择内容*/
        finishScreenItem(){
            this.screenSwitch=false;
            this.screenSwitchCon=false;

        }
    }
}
</script>
<style lang="less" scoped>
@import url(../assets/less/public.less);
@color:{color: #333333};
    .liquorType{
         background: @config-bg3;
        .searchList_head{
            @width();
            @flex();
            @justify1();
            padding: 0.8em 0;
            .search_box{
                flex-grow: 1;
                margin-right: 1em;
                background: #eeeeee;
                height: 2em;
                border-radius: 1em;
                box-sizing: border-box;
                padding: 0 0 0 1em;
                margin: 0 1em;
                color: #aaaaaa;
                overflow: hidden;
                @flex();
                @justify3();
                img{
                    width: 1.3em;
                }
                /deep/ .el-input{
                    text-align: left;
                    .el-input__inner{
                        height: 2em !important;
                        line-height: 2em !important;
                        background: #eeeeee !important;
                        padding: 0 1%;
                        border: none;
                        width: 95%;
                    }
                }
                
            }
            .goBack{
            @goBack();
            }
            .search_text{ @color();}
        }
        .tool_bar{
            background: @config-bg2;
            .tool_bar_con{
                @flex();
                @justify1();
                padding: 1em 0;
                @width();
                li{
                    flex-grow: 1;
                    position: relative;
                    .sortbtn{
                        margin-left: 2px; 
                        width: 12px;
                        top: 7px;
                        b {
                            cursor:pointer;
                            left: 0;
                            display: block;
                            width: 0;
                            height: 0 !important;
                            border: 6px solid transparent
                        }
                        .blueasc{
                            border-bottom-color:#5D6AB9 !important;
                        }
                        .bluedesc{
                            border-top-color:#5D6AB9 !important;
                        }

                        b:first-child{
                            border-bottom-color:#b7b1cc; 
                            margin-bottom: 2px
                        }
                        b:last-child{
                            border-top-color:#b7b1cc; 
                        }
                    }
                }
                .flex_grow{
                    @flex();
                    @justify1();
                    flex-grow: 2;
                }
            }
        }
        .commodity_con{
            @width();
            @flex();
            @justify4();
            flex-wrap:wrap;
            li{
                width: 49%;
                background: @config-bg2;
                border-radius: 3px;
                margin-bottom: 0.5em;
                overflow: hidden;
                .commodity_img{
                    width: 100%;
                    height: 200px;
                    overflow: hidden;
                    background: @config-bg;
                }
                .commodity_text{
                    padding: 0.8em 0 0.8em 0.7em;
                    text-align: left;
                    box-sizing: border-box;
                    .commodity_title{
                        display: block;
                        line-height: 1.7em
                        }
                    .commodity_price{
                        color: @config-bg;
                    }
                    .commodity_salesVolume{
                        display: none;
                    }
                }
            }
        }
        .filter_box{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0,0,0,0.5);
            .filter_box_btm{
                width:100%;
                height:100%;
                z-index:-1;
                position:absolute;
            }
            .filter_box_con{
                width: 80%;
                position: absolute;
                right: 0;
                background: @config-bg2;
                height: 100%;
                
                .filter_box_con_c{
                    @width();
                    .filter_box_con_c_title{
                        margin: 2em 0 1em 0;
                        text-align: left;
                    }
                    .filter_box_type{
                        /deep/ .el-checkbox-group{
                                    @flex();
                                    @justify4();
                                    flex-wrap: wrap;
                                    .el-checkbox-button{
                                        width: 32%;
                                        display: block;
                                        border-radius: 3px;
                                        margin-bottom: 8px;
                                        height: 35px;
                                        background: #eeeeee;
                                        box-sizing: border-box;
                                        .el-checkbox-button__inner{
                                            border: none;
                                            display: block;
                                            box-sizing: border-box;
                                            padding: 0;
                                            border-radius: 3px;
                                            line-height: 35px;
                                            background: none;
                                        }
                                        .el-checkbox-button__inner:hover{
                                            color: #333333;
                                        }
                                    }
                                   .is-checked{
                                        border: 1px solid;
                                        border-color: @config-bg;
                                        
                                        .el-checkbox-button__inner{
                                            color: #333333;
                                            border: none;
                                            box-shadow:none;
                                        }
                                    }
                                }
                        
                    }
                    
                }
                .filter_box_con_b{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    @flex();
                    @justify4();
                    span{
                        display: block;
                        flex-grow: 1;
                        height: 2.5em;
                        line-height: 2.5em;
                        color: @config-bg2;
                        @font16();
                    }
                    span:first-child{
                        background: #cccccc;
                    }
                    span:last-child{
                        background: @config-bg;
                    }
                }
            }
        }
    .screenSwitch-enter{
        opacity: 0
        }
    .screenSwitch-enter-active{
        transition: all 0.1s;
        opacity: 1
        }
    .screenSwitch-leave-active{
        transition: all 0.5s;
        opacity: 0
        }
    .screenSwitchCon-enter-active {
        opacity: 1;
        transition: all 0.4s ease;
        }
    .screenSwitchCon-leave-active {
        transition: all 0.3s ease;
        }
    .screenSwitchCon-enter {
        opacity: 0;
        transform: translatex(100px);
        }
    .screenSwitchCon-leave-active {
        opacity: 0;
        transform: translateX(100px);
        }
    }
</style>


